/* 
Vuerouter 

options 传入对象
routerMap 路由与组件的对应关系
data 响应式对象 current 路由变化组件更新

Contructor 初始化
_install
init
initEvent 注册popstate事件 监听浏览器变化
createRouteMap 初始化routerMap熟悉 {component:router}
initComponents 创建routerlink routerview组件
*/
let _Vue = null
export default class VueRouter {
    static install(Vue){
        // 1 判断当前插件是否已经被安装
        if(VueRouter.install.installed){
            return
        }
        VueRouter.install.installed = true
        // 2 把Vue构造函数记录到全局变量
        _Vue = Vue
        // 3 把创建Vue实例时候传入的router对象注入到Vue实例上
        //混入
        _Vue.mixin({
            beforeCreate() {
                if(this.$options.router){
                _Vue.prototype.$router = this.$options.router

                this.$options.router.init()
                }
            },
        })
    }
    constructor(options){
        this.options = options
        this.routerMap={}
        this.data = _Vue.observable({current:'/'}) //响应式对象
    }

    init(){
        this.createRouteMap()
        this.initComponents(_Vue)
        this.initEvent()
    }
    createRouteMap(){
        // 便利所有的路由规则，把路由规则解析成键值对的形式 存储到routeMap中
        this.options.routes.forEach(route=>{
            this.routerMap[route.path] = route.component
        })
    }

    initComponents(Vue){
        Vue.component('router-link',{
            props:{
                to:String
            },
            render(h){
                //params： - 标签/选择器  - 设置属性 - 子元素（数字）
                return h('a',{
                    attrs:{
                        href:this.to
                    },
                    on:{//注册点击事件
                        click:this.clickHandler
                    }
                },[this.$slots.default])
            },
            methods: {
                clickHandler(e){
                    //data  网页title  要跳转的url
                    history.pushState({},'',this.to)//调用pushstate 方法改变地址栏，不向服务器发送请求
                    this.$router.data.current = this.to
                    e.preventDefault() //阻止默认行为

                }
            },
            // template:'<a :href="to"><slot></slot></a>'
        })

        const self = this
        Vue.component('router-view',{
            render(h){
                const component = self.routerMap[self.data.current] 
                return h(component) //把component转换成虚拟DOM
            }
        })
    }

    initEvent(){
        window.addEventListener('popstate',()=>{
            this.data.current = window.location.pathname
        })
    }
}
/* 
Vue的构建版本
- 运行时版：不支持template模板，需要打包的时候提前编译
- 完整版：包含运行时和编译器，体积比运行时版本大10k左右，程序运行的时候把模板转换成render函数

解决：
- 使用完整版(带编译器)
//vue.config.js
module.exports = {
    runtimeCompiler:true //template-->render函数
}
- 使用运行时版本
render(h){
    return h(标签选择器，属性，子元素数组)
}

点击导航栏 前进和后退时触发 popstate
 */